<template>
    <div    class="home">
           <div  style="width: 100%;height: 40px;background-color: blue;">实现头尾固定，中间自适应auto</div>
         <div class="content">
          <!-- 头部区域 -->
            <header>
                <div class="text"> 外卖</div>
                <div class="location">
                  <van-icon name="location" />
                  <span>小滴课堂120室</span>
                  <van-icon name="arrow" />
                </div>
            </header>
            <!-- 主要内容区域 -->
               <div  class="main">
                   <div  class="main_bg">
                        <div class="search">
                            <input type="text"/>
                            <div class="search_text">搜索</div>
                        </div>
                        <div  class="classify">
                           <div class="big_classify">
                               <div v-for ="(item,index) in  homeData.big_classify"  :key = 'index'>
                                    <svg class="icon" aria-hidden="true">
                                        <use :xlink:href=" `#${item.icon}` "></use>
                                    </svg>     
                                    {{ item.name }} 
                               </div>
                           </div>
                           <div  class="small_classify">
                                  <div v-for ="(item,index) in  homeData.small_classify"  :key = 'index'>
                                          <svg class="icon" aria-hidden="true">
                                              <use :xlink:href=" `#${item.icon}` "></use>
                                          </svg>     
                                          {{ item.name }} 
                                    </div>

                           </div>
                        </div>
                   </div>
                    
                
                        <van-tabs  class="van-tabs">
                            <van-tab  v-for="(item,index) in homeData.centent_nav_list"    :title="item.tab"  :key="index" >
                              
                            <Store   :store_list ="item.data" ></Store>
                            </van-tab>
                           
                        </van-tabs>
                  
               </div>  

         </div>
         <Footer/>
    </div>
</template>

<script>
import {reactive,toRefs,onMounted} from 'vue'
import Footer from '../../components/Footer.vue'

import Store from './component/Store.vue'
import { getHomeData } from '@/request/api'
export default {
     components:{
        Footer,  
        Store
     },
    setup () {
            let  data = reactive( {
         homeData:{}
    })



    // 1、首页店铺数据请求

    const  getHome = async  ()=>{

   const  result = await  getHomeData()
   
         if(result.status === 200 && result.data.code === 0){
          data.homeData = result.data.data
         }

    }


    onMounted(() => {
      getHome();
    })

        return { 
             ...toRefs(data)

        }
    }
}
</script>

<style lang="less" scoped>

 /deep/ .van-tabs__wrap{

     border-radius: 10px;


 }
          .home{
            display: flex;
            flex-flow: column;
            height: 100%;
            font-size: 12px;
              .content{
                flex: 1;
                overflow-y: auto;
                //overflow-x:hidden ;
              
                >header{

                      /*  direction：默认为to bottom，即从上向下的渐变； */
                         background: linear-gradient(#ffc400,#fff);
                         display: flex;
                         justify-content: space-between;
                         align-items: center;
                         padding: 20px 20px 40px 20px;
                         >.text{
                          font-size: 20px;
                          font-weight: 600;
                         }
                          
                         >.location{
                            >span{
                              margin: 0 5px;
                              font-size: 14px;
                            }
                           
                         }
                       
                     

                        
                }
               >.main{
                  margin-top: -30px;
                  .main_bg{
                    background: linear-gradient(#fff,#f5f5f5);
                   padding: 10px 20px  0 20px;
                   border-radius: 30px 30px 0 0;
                   /* 
                   这句代码等价于
                   border-top-left-radius: 30px;
                    border-top-right-radius: 30px;
                    border-bottom-right-radius: 0px;
                    border-bottom-left-radius: 0px
                   */
                      >.search{
                          position: relative;
                          >.search_text{
                              position: absolute;
                              background: #ffc400;
                              right: -5px;
                              top:1px;
                              width: 50px;
                              height: 32px;
                              border-radius: 16px;
                              text-align: center;
                              line-height: 32px;
                             
                          }
                          input{
                            width: 100%;
                            border: 1px solid #ffc400;
                            border-radius: 20px;
                            height: 30px;
                          }
                      }


                    >.classify{
                        padding: 20px  0;
                        
                        >.big_classify{
                           display: flex;
                          div{
                            flex: 1;
                            display: flex;
                            justify-content: center;
                            flex-flow: column;
                            align-items: center;
                            
                            >.icon{
                            width: 50px;
                            height: 50px;
                            margin-bottom: 5px;
                           }
                          }
                           
                          
                        }

                        >.small_classify{
                          display: flex;
                          flex-wrap: wrap;
                          margin-top: 20px;
                          >div{
                            display: flex;
                            justify-content: center;
                            flex-flow: column;
                            align-items: center;
                            width: 20%;
                            .icon{
                                  width: 30px;
                                  height: 30px;
                                  margin: 10px;
                             }
                             
                          }
                          
                        }
                    }
 

                 }
                  
                 .van-tabs{

                  padding: 0 20px 10px;
                 }



                
               }


              } 
          }
</style>